<template>
  <div>
    <Upload
      ref="upload"
      :show-upload-list="true"
      :on-success="handleSuccess"
      :format="['pdf']"
      :max-size="5120"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      :headers="accessToken"
      type="drag"
      :action="action"
      style="display: inline-block;width:58px;">
      <div style="width: 58px;height:58px;line-height: 58px;">
          <Icon type="ios-camera" size="20"></Icon>
      </div>
    </Upload>
  </div>
</template>
<script>
import { base, base_url } from '@/libs/axios';
import { updateProjectBudget, deleteFile } from '@/api/project';
import { getStore } from '@/libs/storage';
export default {
  props: {
    budget: Object,
  },
  data() {
    return {
      accessToken: {},
      action: `${base}/upload`,
      uploadList: [],
    }
  },
  methods: {
    handleView() {

    },
    handleRemove() {

    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        const filename = this.budget.budget_content;
        if (filename) {
          deleteFile({filename});
        }
        let params = {
          id: this.budget.id,
          budget_content: res.data.url
        };

        updateProjectBudget(params);
        this.$Message.success(res.message);

        this.$emit("on-uploaded", true);
      }
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: 'The file format is incorrect',
        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
      });
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '文件大小超出',
        desc: '文件  ' + file.name + ' 超过5M大小'
      });
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: 'Up to five pictures can be uploaded.'
        });
      }
      return check;
    }
  },
  mounted () {
    this.accessToken = {
      accessToken: getStore("accessToken")
    };
    this.uploadList = this.$refs.upload.fileList;
  }
}
</script>
<style lang="less" scoped>
.demo-upload-list{
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>